<template>
    <div class="custom">
        <el-form size="small" label-width="100px">
            <el-form-item label="路由名称" required>
                <el-input style="width: 280px" v-model="params.name" placeholder="请输入跳转链接"></el-input>
            </el-form-item>
            <el-form-item label="路由Path" required>
                <el-input style="width: 280px" v-model="params.path" placeholder="请输入跳转链接"></el-input>
            </el-form-item>

            <el-form-item label="是否tabBar" required>
                <el-radio-group v-model="params.isTabBar">
                    <el-radio :label="false">非tabBar页面</el-radio>
                    <el-radio :label="true">tabBar页面</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="跳转参数" required>
                <el-input style="width: 280px" v-model="params.params" placeholder="请输入跳转链接"></el-input>
            </el-form-item> -->
            <el-form-item label="">
                <div style="line-height: 1.3" class="muted">
                    <ul>
                        <li> 这里主要是让导航跳转到应用内的某个页面。</li>
                        <li> 值得注意的是，这里的路由名称，可能只是一个显示作用，在uniapp中，是没有通过名称跳转的功能。</li>
                        <li> 需要明确，是跳转到 tabbar的某个页面，还是非tabbar页面。这个功能后续再做</li>
                        <li> 如果需要添加参数，参数的key值，value值，都要添加，或者直接让输入一个json格式字符串</li>
                        <li> 最好是有一个页面，能够直接批量生成。例如，直接把 pages里的配置，通过js手段提取出来，批量添加。</li>
                    </ul>
                 
                    <br />
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Vue,
    Watch
} from 'vue-property-decorator'

@Component({
    components: {}
})
export default class Shop extends Vue {
    @Prop() value!: any

    get params() {
        return this.value
    }
    set params(val) {
        this.$emit('input', val)
    }
}
</script>
<style lang="scss" scoped></style>
